<template>
	<view class="page-content">
		<u-navbar :is-back="false" title="湖北移动网络运营看板-业务" :background="background" title-color="#000"
			:border-bottom="true">
		</u-navbar>
		<view class="bg">
			<view class="title"></view>
		</view>
		<!-- 有线装维-->
		<view class="satisfaction">
			<view class="wired">
				<view style="padding: 34rpx 20rpx 0 20rpx;">
					<u-subsection :list="list3" :current="curNow3" @change="sectionChange3" active-color="#fff"
						inactive-color="#A7ABBB" bg-color="#F1F6FF" button-color="#1B9CFF" font-size="26upx"
						class="subsection2"></u-subsection>
				</view>
				<u-tabs v-if="curNow3 == 0" :list="ZJYWList" :current="current1" :is-scroll="false"
					@change="tabsChange"></u-tabs>
				<!-- 家客 -->
				<view class="" v-if="curNow3 == 0 && current1 == 0">
					<!-- 装机业务-宽带-->
					<view class="bar-chart" id="section1">
						<view class="chart-main">
							<view class="chart-main-top">
								<view class="chart-main-top-left">
									<u-icon name="play-right-fill" color="#5F6475" size="28"
										style="margin-right: 8rpx;"></u-icon>
									装机业务-整体(含FTTR)
								</view>
							</view>
							<view class="broadband">
								<view class="broadband-item">
									<view class="broadband-item-bg">
										{{jiakeData.KdslNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #0CB480;">
									<view class="broadband-item-bg">
										{{jiakeData.KdwcNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #F37A00;">
									<view class="broadband-item-bg">
										{{jiakeData.KdztcslNum}}
									</view>
								</view>
							</view>
							<view class="broadband-font">
								<view class="">受理量</view>
								<view class="">完成量</view>
								<view class="">在途超24小时量</view>
							</view>
						</view>
					</view>
				
					<!-- 退单量 -->
					<view class="return-quantity">
						<view class="return-quantity-main">
							<view class="return-quantity-left">
								<u-icon name="play-right-fill" color="#5F6475" size="28"
									style="margin-right: 8rpx;"></u-icon>
								退单量
							</view>
							<view class="return-quantity-main-left" @click="goDetails(0)">
								<view class=""></view>
								<view class=""></view>
								<view class=""></view>
							</view>
							<view class="return-quantity-main-center"></view>
							<view class="return-quantity-main-bottom" @click="goDetails(0)">
								<view class="">网络原因退单量<i style="color: #7DA4CF;">{{jiakeData.KdwlyyNum}}</i></view>
								<view class="">用户原因退单量<i style="color: #2654B0;">{{jiakeData.KdyhyyNum}}</i></view>
								<view class="">前台原因退单量<i style="color: #5855D6;">{{jiakeData.KdqtyyNum}}</i></view>
							</view>
						</view>
					</view>
					<!-- 堆叠图 -->
					<view style="width:710rpx; height:500rpx">
						<l-echart ref="chartRef" style="width:710rpx; height:500rpx"></l-echart>
					</view>
					<view class="pic_fenge"></view>

					<view class="bar-chart" id="section2">
						<view class="chart-main">
							<view class="chart-main-top">
								<view class="chart-main-top-left" style="width: 250rpx;">
									<u-icon name="play-right-fill" color="#5F6475" size="28"
										style="margin-right: 8rpx;"></u-icon>
									装机业务-FTTR
								</view>
							</view>
							<view class="broadband">
								<view class="broadband-item">
									<view class="broadband-item-bg">
										{{jiakeData.FttrslNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #0CB480;">
									<view class="broadband-item-bg">
										{{jiakeData.FttrwcNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #F37A00;">
									<view class="broadband-item-bg">
										{{jiakeData.FttrztcsNum}}
									</view>
								</view>
							</view>
							<view class="broadband-font">
								<view class="">受理量</view>
								<view class="">完成量</view>
								<view class="">在途超24小时量</view>
							</view>
						</view>
					</view>
					<!-- 地图 -->
					<!-- <view style="width:710rpx; height:500rpx;margin-top:45rpx;">
						<l-echart ref="echartsmap2"></l-echart>
					</view> -->
					<!-- 退单量 -->
					<view class="return-quantity">
						<view class="return-quantity-main">
							<view class="return-quantity-left">
								<u-icon name="play-right-fill" color="#5F6475" size="28"
									style="margin-right: 8rpx;"></u-icon>
								退单量
							</view>
							<view class="return-quantity-main-left" @click="goDetails(1)">
								<view class=""></view>
								<view class=""></view>
								<view class=""></view>
							</view>
							<view class="return-quantity-main-center"></view>
							<view class="return-quantity-main-bottom" @click="goDetails(1)">
								<view class="">网络原因退单量<i style="color: #7DA4CF;">{{jiakeData.FttrlwyyNum}}</i></view>
								<view class="">用户原因退单量<i style="color: #2654B0;">{{jiakeData.FttryhyyNum}}</i></view>
								<view class="">前台原因退单量<i style="color: #5855D6;">{{jiakeData.FttrqtyyNum}}</i></view>
							</view>
						</view>
					</view>
					<!-- 堆叠图 -->
					<view style="width:710rpx; height:500rpx">
						<l-echart ref="chartRef2" style="width:710rpx; height:500rpx"></l-echart>
					</view>
				</view>
				<view class="" v-if="curNow3 == 0 && current1 == 1">
					<view class="bar-chart">
						<view class="chart-main"
							style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);">
							<view class="chart-main-top">
								<view class="chart-main-top-left">
									<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
									运维质量
								</view>
							</view>
							<view class="broadband">
								<view class="broadband-item">
									<view class="broadband-item-bg">
										{{jiakeData.QzNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #0CB480;">
									<view class="broadband-item-bg">
										{{jiakeData.QzyxNum}}
									</view>
								</view>
								<view class="broadband-item" style="color: #F37A00;">
									<view class="broadband-item-bg">
										{{jiakeData.QzcsxsNum}}
									</view>
								</view>
							</view>
							<view class="broadband-font">
								<view class="">日群障数</view>
								<view class="">日群障影响用户数</view>
								<view class="">日群障4小时</br>超时件数</view>
							</view>
						</view>
					</view>
					<!-- 地图 -->
					<!-- <view style="width:710rpx; height:500rpx;margin-top:45rpx;">
						<l-echart ref="echartsmap3"></l-echart>
					</view> -->
				</view>
				<!-- 集客 -->
				<view class="" v-if="curNow3 == 1">
					<view class="jike" style="height: 176rpx;">
						<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);">
							<view class="jike-main-top">
								<view class="jike-main-top-left">
									<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
									装机质量
								</view>
							</view>
							<view class="duration">
								<view class="duration-item">
									<view class="font1">
										<view class="icon"></view>
										<view class="text">{{jikeData.Zxktsc}}天</view>
									</view>
									<view class="font2">专线开通时长</view>
								</view>
								<view class="duration-item">
									<view class="font1">
										<view class="icon2"></view>
										<view class="text">{{jikeData.ZxztNum}}件</view>
									</view>
									<view class="font2">专线在途工单数</view>
								</view>
							</view>
						</view>
					</view>
				
					<view class="pic_fenge"></view>
					<view class="jike" style="height: 176rpx;">
						<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);">
							<view class="jike-main-top">
								<view class="jike-main-top-left">
									<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
									装机业务
								</view>
							</view>
							<view class="duration">
								<view class="duration-item">
									<view class="font1">
										<view class="icon3"></view>
										<view class="text">{{jikeData.QkslNum}}件</view>
									</view>
									<view class="font2">商客宽带受理量</view>
								</view>
								<view class="duration-item" @click="goDetails(2)">
									<view class="font1">
										<view class="icon4"></view>
										<view class="text">{{jikeData.QkttNum}}件</view>
									</view>
									<view class="font2">商客宽带退单量</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 双柱状图 -->
					<view style="width:710rpx; height:500rpx;margin-top: 47rpx;">
						<l-echart ref="chartRef10" style="width:710rpx; height:500rpx"></l-echart>
					</view>
				</view>
			</view>
			<!-- 网络质量 -->
			<view class="title" id="section7">
				<view class="img3"></view>
			</view>
			<view class="main" >
				<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);height: 240rpx;padding-top: 40rpx;width: 598rpx;margin: 0 auto 40rpx;">
					<view class="jike-main-top" style="padding: 0 60rpx 0 80rpx;margin-top: 20rpx;">
						<view class="jike-main-top-left" style="width: auto;font-size: 24rpx;">
							全省值 <span style="color: #1B9CFF;font-weight: bold;margin: 0 6rpx;">{{wxData.FlbAvg}}%</span>
						</view>
						<view class="jike-main-top-left" style="margin-left: auto;width: 170rpx;font-size: 24rpx;">
							全省值 <span style="color: #16CBAC;font-weight: bold;margin: 0 6rpx;">{{wxData.DslAvg}}%</span>
						</view>
					</view>
					<view class="duration">
						<view class="duration-item" style="margin-top: -10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<span class="text" style="color: #1B9CFF;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{wxData.FlbRatio}}%</span>
								<span class="text" style="font-size: 24rpx;">第{{wxData.FlbSort}}名</span>
							</view>
							<view class="font2" style="margin-top: 10rpx;">5G分流比</view>
						</view>
						<view class="duration-item" style="margin-top: -10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<view class="text" style="color: #16CBAC;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{wxData.DslRatio}}%</view>
								<view class="text" style="font-size: 24rpx;">第{{wxData.DslSort}}名</view>
							</view>
							<view class="font2" style="margin-top: 10rpx;">5G低速率用户占比</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 网络满意度 -->
			<view class="title" id="section4">
				<view class="img"></view>
			</view>
			<view class="main">
				<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);height: 194rpx;padding-top: 40rpx;width: 598rpx;margin: 0 auto;">
					<view class="jike-main-top" style="padding: 0 20rpx;">
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: auto;color: #A7ABBB;font-size: 24rpx;">
							<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
							移动业务
						</view>
						<view class="jike-main-top-left" style="margin-top: -60rpx;margin-left: auto;width: 170rpx;font-size: 24rpx;">
							目标值 <span style="color: #1B9CFF;font-weight: bold;margin: 0 6rpx;">{{mydData.YdywTarget}}</span>
						</view>
					</view>
					<view class="duration">
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<span class="text" style="color: #1B9CFF;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.YdywBxz}}</span>
								<span class="text" style="font-size: 24rpx;">第{{mydData.YdywBxzSort}}名</span>
							</view>
							<view class="font2">移动网络表现值</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<view class="text" style="color: #16CBAC;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.YdywLxz}}</view>
								<view class="text" style="font-size: 24rpx;">第{{mydData.YdywLxzSort}}名</view>
							</view>
							<view class="font2">移动网络领先值</view>
						</view>
					</view>
				</view>
				<view class="pic_fenge"></view>
				<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);height: 194rpx;padding-top: 40rpx;width: 598rpx;margin: 40rpx auto;">
					<view class="jike-main-top" style="padding: 0 20rpx;">
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 350rpx;color: #A7ABBB;font-size: 24rpx;">
							<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
							固定上网-家宽上网
						</view>
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 170rpx;margin-left: 40rpx;font-size: 24rpx;">
							挑战值 <span style="color: #F37A00;font-weight: bold;margin: 0 6rpx;">{{mydData.GdswjkTzz}}</span>
						</view>
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 170rpx;margin-left: auto;font-size: 24rpx;">
							基准值 <span style="color: #5855D6;font-weight: bold;margin: 0 6rpx;">{{mydData.GdswjkJzz}}</span>
						</view>
					</view>
					<view class="duration">
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<span class="text" style="color: #1B9CFF;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.GdswjkBxz}}</span>
								<span class="text" style="font-size: 24rpx;">第{{mydData.GdswjkBxzSort}}名</span>
							</view>
							<view class="font2">家宽上网表现值</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<view class="text" style="color: #16CBAC;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.GdswjkLxz}}</view>
								<view class="text" style="font-size: 24rpx;">第{{mydData.GdswjkLxzSort}}名</view>
							</view>
							<view class="font2">家宽上网领先值</view>
						</view>
					</view>
				</view>
				<view class="pic_fenge"></view>
				<view class="jike-main" style="background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FF 100%);height: 194rpx;padding-top: 40rpx;width: 598rpx;margin: 40rpx auto;">
					<view class="jike-main-top" style="padding: 0 20rpx;">
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 350rpx;color: #A7ABBB;font-size: 24rpx;">
							<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
							固定上网-安装维护
						</view>
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 170rpx;margin-left: 40rpx;font-size: 24rpx;">
							挑战值 <span style="color: #F37A00;font-weight: bold;margin: 0 6rpx;">{{mydData.GdswazTzz}}</span>
						</view>
						<view class="jike-main-top-left" style="margin-top: -60rpx;width: 170rpx;margin-left: auto;font-size: 24rpx;">
							基准值 <span style="color: #5855D6;font-weight: bold;margin: 0 6rpx;">{{mydData.GdswazJzz}}</span>
						</view>
					</view>
					<view class="duration">
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<span class="text" style="color: #1B9CFF;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.GdswazBxz}}</span>
								<span class="text" style="font-size: 24rpx;">第{{mydData.GdswazBxzSort}}名</span>
							</view>
							<view class="font2">安装维护表现值</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;">
							<view class="font1" style="display: flex;align-items: center;justify-content: space-between;background: url('static/images/numbg.png') no-repeat;background-size: 100% 100%;width: 214rpx;padding: 20rpx;margin: 0 auto;">
								<view class="text" style="color: #16CBAC;font-size: 26rpx;min-width: 60rpx;text-align: center;">{{mydData.GdswazLxz}}</view>
								<view class="text" style="font-size: 24rpx;">第{{mydData.GdswazLxzSort}}名</view>
							</view>
							<view class="font2">安装维护领先值</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 业务规模 -->
			<view class="title" id="section7">
				<view class="img2"></view>
			</view>
			<view class="main">
				<view class="ywgmView" >
						<view class="duration-item" style="margin-top: 10rpx;" @click="onYWGM(1)">
							<view  style="text-align: center;color: #A7ABBB;font-size: 24rpx;">5G流量</view>
							<view :class="action == 1 ? 'font1 font1s' : 'font1'">
								<view class="text" style="color: #1B9CFF;font-weight: bold;font-size: 24rpx;">{{businessData.List5G[businessData.List5G.length-1].Value}}<span style="font-size: 20rpx;">TB</span></view>
							</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;" @click="onYWGM(2)">
							<view class="font2" style="text-align: center;color: #A7ABBB;font-size: 24rpx;">4G流量</view>
							<view :class="action == 2 ? 'font1 font1s' : 'font1'">
								<view class="text" style="color: #16CBAC;font-weight: bold;font-size: 24rpx;">{{businessData.List4G[businessData.List4G.length-1].Value}}<span style="font-size: 20rpx;">TB</span></view>
							</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;" @click="onYWGM(3)">
							<view class="font2" style="text-align: center;color: #A7ABBB;font-size: 24rpx;">家宽流量</view>
							<view :class="action == 3 ? 'font1 font1s' : 'font1'">
								<view class="text" style="color: #5855D6;font-weight: bold;font-size: 24rpx;">{{businessData.ListJK[businessData.ListJK.length-1].Value}}<span style="font-size: 20rpx;">TB</span> </view>
							</view>
						</view>
						<view class="duration-item" style="margin-top: 10rpx;" @click="onYWGM(4)">
							<view class="font2" style="text-align: center;color: #A7ABBB;font-size: 24rpx;">话务量</view>
							<view :class="action == 4 ? 'font1 font1s' : 'font1'" style="width: 160rpx;">
								<view class="text" style="color: #F37A00;font-weight: bold;font-size: 24rpx;">{{businessData.ListHwl[businessData.ListHwl.length-1].Value}} <span style="font-size: 20rpx;">万ERL</span> </view>
							</view>
						</view>
				</view>
				<!-- 双柱状图 -->
				<view style="width:710rpx; height:450rpx;margin-top: 20rpx;">
					<l-echart ref="chartRef11" style="width:710rpx; height:450rpx"></l-echart>
				</view>
			</view>
			<!-- 广电业务 -->
			<view class="title" id="section8">
				<view class="img4"></view>
			</view>
			<view class="main">
				<view class="guangdian">
					<view class="tjzq">
						统计日期：{{gdywData.Tjzq}}
					</view>
					<view class="guangdian_nr">
						<img src="@/static/images/summaryReport/5G.png" class="guangdian_icon" alt="">
						<view class="guangdian_nrItem">
							<view class="nrItem_left">
								<view class="nrItem_left_title" style="margin-top: 42rpx;">
									5G用户数
								</view>
								<view class="nrItem_left_num">
								{{gdywData.Yhs5G}}<span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">万</span>
								</view>
							</view>
							<view class="nrItem_right">
								<view class="nrItem_right_title" style="margin-top: 42rpx;">5G流量</view>
								<view class="nrItem_right_num">
									{{gdywData.Ll5G}} <span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">TB</span>
								</view>						
							</view>
						</view>
						<view class="guangdian_nrItem">
							<view class="nrItem_left">
								<view class="nrItem_left_title">
									5G无线接通率
								</view>
								<view class="nrItem_left_num">
									{{gdywData.Zccgl5G}}<span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">%</span>
								</view>
							</view>
							<view class="nrItem_right">
								<view class="nrItem_right_title"> 
									5G无线掉线率
								</view>
								<view class="nrItem_right_num">
									{{gdywData.Sahhcgl5G}} <span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">%</span>
								</view>						
							</view>
						</view>
					</view> 
				<!-- 	<view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef6" style="width:700rpx; height:320rpx"></l-echart>
					</view> -->
					<view class="guangdian_nr">
						<img src="@/static/images/summaryReport/4G.png" class="guangdian_icon" alt="">
						<view class="guangdian_nrItem">
							<view class="nrItem_left">
								<view class="nrItem_left_title" style="margin-top: 42rpx;">
									4G用户数
								</view>
								<view class="nrItem_left_num">
									{{gdywData.Yhs4G}}<span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">万</span>
								</view>
							</view>
							<view class="nrItem_right">
								<view class="nrItem_right_title" style="margin-top: 42rpx;">4G流量</view>
								<view class="nrItem_right_num">
									{{gdywData.Ll4G}} <span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">TB</span>
								</view>						
							</view>
						</view>
						<view class="guangdian_nrItem">
							<view class="nrItem_left">
								<view class="nrItem_left_title">
									4G无线接通率
								</view>
								<view class="nrItem_left_num">
									{{gdywData.Hzcgl4G}}<span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">%</span>
								</view>
							</view>
							<view class="nrItem_right">
								<view class="nrItem_right_title"> 
									4G无线掉线率
								</view>
								<view class="nrItem_right_num">
									{{gdywData.Czcgl4G}} <span style="font-weight: 300;font-size: 24rpx;margin-left: 10rpx;">%</span>
								</view>						
							</view>
						</view>
					</view>
					<!-- <view style="width:700rpx; height:320rpx;margin-top: 40rpx;">
						<l-echart ref="chartRef7" style="width:700rpx; height:320rpx"></l-echart>
					</view> -->
				</view>
			</view>
			
			<!-- 底部图片 -->
			<!-- <view class="bottom-img" @click="goQualityAndScale()">
				<view class="img"></view>
			</view> -->
		</view>
	</view>
</template>

<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import jsonData from '@/static/map/hubei.json'
	// const jsonData = require('static/map/hubei.json');
	export default {
		watch: {
			// 监听路由变化
			'$route'(to, from) {
				if (to.path === '/pagesJK/indicator/index') {
					this.curNow3 = this.$route.query.current || 0
					this.current1 = this.$route.query.current2 || 0
					this.initData()
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0, // 滚动到目标元素的位置
							duration: 0 // 滚动动画持续时间，单位ms
						});
						this.initializePage();
					});

				}
			}
		},
		data() {
			return {
				list3: [{
						name: '家客'
					},
					{
						name: '集客'
					}
				],
				ZJYWList: [{
						name: '装机'
					},
					{
						name: '运维'
					}
				],
				GDSWList: [{
						name: '家宽上网'
					},
					{
						name: '安装维护'
					}
				],
				curNow3: 0,
				current1: 0,
				current2: 0,
				buscityData2: [], // 地图数据 家客
				buscityData3: [], // 地图数据 集客
				idcList: [], // IDC数据
				idcListAll: [], // 全部IDC数据
				butShow: true,
				list: [{
					name: '移动业务'
				}, {
					name: '固定上网'
				}],
				current: 0,
				YDYWListName: [], //满意度 - 地市名称
				YDYWList: [], //满意度 - 移动业务 表现
				YDYWList2: [], //满意度 - 移动业务 领先

				leadingListName: [], //固定上网 - 地市名称
				leadingList: [], // 固定上网1
				leadingList2: [], // 固定上网2
				leadingList3: [], // 固定上网3
				leadingList4: [], // 固定上网4
				ZQZXDataName: [], // 政企专线 地市名称
				ZQZXData: [], // 政企专线

				background: {
					backgroundColor: '#fff'
				},
				JKZWData: {},
				YWData: {},
				JKData: {},
				cityName: '',

				jiakeData: {}, // 家客
				jikeData: {}, // 集客
				jiakeCityData: {}, // 家客地图数据
				jiakeCityData1: {},
				jikeCityData: {}, // 集客地图数据
				jikeCityData1: {}, // 集客地图数据
				// 宽带装机 变色数据
				section: '',
				section1: '',
				section6: '',
				arr1: [],

				section2: '',
				section3: '',
				arr2: [],

				section4: '',
				section5: '',
				section8: '',
				arr3: [],
				chartInstance: null,
				mydData: {},
				action: 1,
				wxData: {},
				businessData: {},
				businessDataAction: [],
				gdywData: {},
			}
		},
		computed: {
			totalNum() {
				return this.jiakeData.KdwlyyNum + this.jiakeData.KdyhyyNum + this.jiakeData.KdqtyyNum;
			},
			kdwlyyPercentage() {
				return ((this.jiakeData.KdwlyyNum / this.totalNum) * 100).toFixed(2);
			},
			kdyhyyPercentage() {
				return ((this.jiakeData.KdyhyyNum / this.totalNum) * 100).toFixed(2);
			},
			kdqtyyPercentage() {
				return ((this.jiakeData.KdqtyyNum / this.totalNum) * 100).toFixed(2);
			},
			totalNum1() {
				return this.jiakeData.FttrlwyyNum + this.jiakeData.FttrqtyyNum + this.jiakeData.FttryhyyNum;
			},
			FttrlwyyPercentage() {
				return ((this.jiakeData.FttrlwyyNum / this.totalNum1) * 100).toFixed(2);
			},
			FttrqtyyPercentage() {
				return ((this.jiakeData.FttrqtyyNum / this.totalNum1) * 100).toFixed(2);
			},
			FttryhyyPercentage() {
				return ((this.jiakeData.FttryhyyNum / this.totalNum1) * 100).toFixed(2);
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			initializePage() {
				if (this.$route.query.to) {
					this.$nextTick(() => {
						this.curNow3 = this.$route.query.current
						this.current1 = this.$route.query.current2
						this.scrollToElement(this.$route.query.to)
					});
				}
			},
			// 滚动到页面的特定元素
			scrollToElement(to) {
				
				if (to) {
					this.$nextTick(() => {
					   uni.createSelectorQuery().select('#' + to).boundingClientRect((rect) => {
						 if (rect) {
						   uni.pageScrollTo({
							 scrollTop: rect.top,
							 duration: 300
						   });
						 }
					   }).exec();
					});
				}
			},
			initData() {
				this.getjiakeInfo()
				this.getjikeInfo()
				this.getMydData()
				this.getbusinessData()
				this.GetwxData()
				this.getgdywData()
				// this.getgdywcityData()
				// this.getgdywcityData2()
				// 家客地图数据
				// 集客地图数据
				if (this.curNow3 === 0) {
					this.getjiakeCityInfo()
					this.getjiakeCityInfo1()
				} else {
					this.getjikeCityInfo1()
				}
			},
			// 广电
			async getgdywData() {
				let data = await this.$api.getgdywData();
				if (data.Code == 200) {
					console.log('广电',data.Data)
					this.gdywData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 广电5g
			async getgdywcityData() {
				let params = '?type=2'
				let data = await this.$api.getgdywcityData(params);
				if (data.Code == 200) {
					console.log('data.Data广电',data.Data)
					this.gdywcityData = data.Data
					// this.initEcharts6()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 广电4g
			async getgdywcityData2() {
				let params = '?type=1'
				let data = await this.$api.getgdywcityData(params);
				if (data.Code == 200) {
					console.log('data.Data广电2',data.Data)
					this.gdywcityData2 = data.Data
					// this.initEcharts7()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async initEcharts6() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '40rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'5G：' +
								this.gdywcityData.map(item => item.f_5gyhs)[params.dataIndex] +
								'万'	
							)
						}
					},
					legend: [{
						data: ['用户数'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.gdywcityData.map(item => item.f_city),
						axisLabel: {
							// rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							// margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{
			
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万",
						type: 'value',
					}],
					series: [
						{
							data: this.gdywcityData.map(item => item.f_5gyhs),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						}
					],
				};
				const chart = await this.$refs.chartRef6.init(echarts)
				chart.setOption(option);
			},
			async initEcharts7() {
				let option = {
					grid: {
						top: '30rpx',
						bottom: '40rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'4G：' +
								this.gdywcityData2.map(item => item.f_4gyhs)[params.dataIndex] +
								'万'	
							)
						}
					},
					legend: [{
						data: ['用户数'],
						top: '0rpx',
						right: '50rpx',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.gdywcityData2.map(item => item.f_city),
						axisLabel: {
							// rotate: -45,
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							// margin: 15, // 设置 X 轴标签与 X 轴的距离
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}	
					},
					yAxis: [{
				
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						name: "单位 万",
						type: 'value',
					}],
					series: [
						{
							data: this.gdywcityData2.map(item => item.f_4gyhs),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							barWidth: 6,
						}
					],
				};
				const chart = await this.$refs.chartRef7.init(echarts)
				chart.setOption(option);
			},
			//业务-有线装维（家客）
			async getjiakeInfo() {
				let data = await this.$api.getjiakeInfo();
				if (data.Code == 200) {
					this.jiakeData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//业务-有线装维（集客）
			async getjikeInfo() {
				this.tableData2 = null
				let data = await this.$api.getjikeInfo();
				if (data.Code == 200) {
					this.jikeData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//满意度
			async getMydData() {
				let data = await this.$api.getMydData();
				if (data.Code == 200) {
					this.mydData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//业务规模趋势图
			async getbusinessData() {
				let data = await this.$api.getbusinessData();
				if (data.Code == 200) {
					this.businessData = data.Data
					this.businessDataAction = data.Data.List5G //初始值
					console.log('this.businessDataAction',this.businessDataAction)
					this.$nextTick(() => {
						this.initChart5()
					})
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//无线网络质量
			async GetwxData() {
				let data = await this.$api.GetwxData();
				if (data.Code == 200) {
					this.wxData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getjiakeCityInfo1() {
				let parmes = '?category=2'
				let data = await this.$api.getjiakeCityInfo(parmes);
				if (data.Code == 200) {
					this.jiakeCityData1 = data.Data

					this.$nextTick(() => {
						if (this.curNow3 == 0 && this.current1 == 0) {
							this.initChart2()
						}
					})
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getjikeCityInfo1() {
				let data = await this.$api.getjikeCityInfo();
				if (data.Code == 200) {
					this.jikeCityData1 = data.Data
					this.initChart4()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//家客装机运维信息
			async getjiakeData() {
				this.tableData2 = null
				let data = await this.$api.getjiakeData();
				if (data.Code == 200) {
					this.jiakeData = data.Data
					this.init1()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},

		
			// 指标固定上网
			async getgdswcityData(type) {
				let params = `?category=${type ? type+1 : 1}`
				let data = await this.$api.getgdswcityData(params);
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					let arr4 = []
					let arr5 = []
					data.Data.forEach(item => {
						arr.push(item.City)
						arr2.push(item.JkBxz)
						arr3.push(item.JkLxz)
						arr4.push(item.AzBxz)
						arr5.push(item.AzLxz)
					})
					this.leadingListName = arr
					this.leadingList = arr2
					this.leadingList2 = arr3
					this.leadingList3 = arr4
					this.leadingList4 = arr5
					if (type == 0) {
						this.init3()
					} else if (type == 1) {
						this.init5()
					}
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 查询IDC表格数据
			async getidcList() {
				let data = await this.$api.getidcList();
				if (data.Code == 200) {
					this.idcList = data.Data.slice(0, 6)
					this.idcListAll = data.Data
					this.butShow = data.Data.length > 6
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
	
			// 家客/集客
			sectionChange3(index) {
				this.curNow3 = index;
				if (this.chartInstance) {
					this.chartInstance.dispose(); // 销毁图表实例
					this.chartInstance = null; // 清空图表实例引用
				}
				this.$nextTick(() => {
					if (this.curNow3 === 0) {
						this.getjiakeCityInfo()
						this.getjiakeCityInfo1()
					} else {
						this.getjikeCityInfo1()
					}
				})

			},
			// 装机/运维
			tabsChange(index) {
				this.current1 = index;
				this.$nextTick(() => {
					this.getjiakeCityInfo()
					this.getjiakeCityInfo1()
				})
			},

			// 业务-有线装维（家客） 地图数据
			async getjiakeCityInfo() {
				let parmes = '?category=1'
				let data = await this.$api.getjiakeCityInfo(parmes);
				if (data.Code == 200) {
					this.jiakeCityData = data.Data
					this.$nextTick(() => {
						if (this.curNow3 == 0 && this.current1 == 0) {
							this.initChart()
						}
					})
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//业务规模点击
			onYWGM(index){
				this.action = index
				if(index == 1){
					this.businessDataAction = this.businessData.List5G
				}else if(index == 2){
					this.businessDataAction = this.businessData.List4G
				}else if(index == 3){
					this.businessDataAction = this.businessData.ListJK
				}else if(index == 4){
					this.businessDataAction = this.businessData.ListHwl
				}
				this.$nextTick(() => {
					this.initChart5()
				})
			},
			// 
			async initChart() {
				let option = {
					grid: {
						top: '20rpx',
						bottom: '65rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'网络原因退单量： ' +
								this.jiakeCityData.map(item => item.KdwlyyNum)[params.dataIndex] +
								'件' +
								'\n' +
								'用户原因退单量： ' +
								this.jiakeCityData.map(item => item.KdyhyyNum)[params.dataIndex] +
								'件' +
								'\n' +
								'前台原因退单量： ' +
								this.jiakeCityData.map(item => item.KdqtyyNum)[params.dataIndex] +
								'件'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.jiakeCityData.map(item => item.County),
						axisLabel: {
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
						}
					},
					yAxis: [{
						// min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						type: 'value',
					}],
					series: [{
							data: this.jiakeCityData.map(item => item.KdqtyyNum),
							type: 'bar',
							name: '前台原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#5855D6',
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData.map(item => (item.KdqtyyNum !== 0 ? (this.jiakeCityData[0]
								.KdwlyyNum + this.jiakeCityData[0].KdyhyyNum + this.jiakeCityData[
									0].KdqtyyNum) / 100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
								borderWidth: 0
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData.map(item => item.KdyhyyNum),
							type: 'bar',
							name: '用户原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#2654B0',
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData.map(item => (item.KdyhyyNum !== 0 || item.KdqtyyNum !==
								0 ? (this.jiakeCityData[0].KdwlyyNum + this.jiakeCityData[0]
									.KdyhyyNum + this.jiakeCityData[0].KdqtyyNum) / 100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData.map(item => item.KdwlyyNum),
							type: 'bar',
							name: '网络原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#7DA4CF',
							},
							barWidth: 8,
						}
					]
				};
				const chart1 = await this.$refs.chartRef.init(echarts)
				chart1.setOption(option);
				chart1.on('click', (params) => {
					this.$router.push({
						path: '/pagesJK/indicator/components/details1',
						query: {
							type: 0,
							city: uni.getStorageSync('cityName'),
							county: params.name,
							mainNavIndex: 0
						}
					});
				});
			},
			async initChart2() {
				let option1 = {
					grid: {
						top: '20rpx',
						bottom: '65rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'网络原因退单量： ' +
								this.jiakeCityData1.map(item => item.FttrlwyyNum)[params.dataIndex] +
								'件' +
								'\n' +
								'用户原因退单量： ' +
								this.jiakeCityData1.map(item => item.FttryhyyNum)[params.dataIndex] +
								'件' +
								'\n' +
								'前台原因退单量： ' +
								this.jiakeCityData1.map(item => item.FttrqtyyNum)[params.dataIndex] +
								'件'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.jiakeCityData1.map(item => item.County),
						axisLabel: {
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
						}
					},
					yAxis: [{
						// min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						type: 'value',
					}],
					series: [{
							data: this.jiakeCityData1.map(item => item.FttrqtyyNum),
							type: 'bar',
							name: '前台原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#5855D6',
								borderWidth: 0
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData1.map(item => (item.FttrqtyyNum != 0 ? (this
								.jiakeCityData1[0].FttrlwyyNum + this.jiakeCityData1[0]
								.FttryhyyNum + this.jiakeCityData1[0].FttrqtyyNum) / 100 : 0)),
							type: 'bar',
							name: '',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData1.map(item => item.FttryhyyNum),
							type: 'bar',
							name: '用户原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData1.map(item => (item.FttryhyyNum !== 0 || item
								.FttrqtyyNum !== 0 ? (this.jiakeCityData1[0].FttrlwyyNum + this
									.jiakeCityData1[0].FttryhyyNum + this.jiakeCityData1[0].FttrqtyyNum
								) / 100 : 0)),
							type: 'bar',
							name: '空白',
							stack: '总和',
							itemStyle: {
								color: '#fff',
							},
							barWidth: 8,
						},
						{
							data: this.jiakeCityData1.map(item => item.FttrlwyyNum),
							type: 'bar',
							name: '网络原因退单量',
							stack: '总和',
							itemStyle: {
								color: '#7DA4CF',

								borderWidth: 0
							},
							barWidth: 8,
						}
					],
				};
				const chart2 = await this.$refs.chartRef2.init(echarts)
				chart2.setOption(option1);
				chart2.on('click', (params) => {
					this.$router.push({
						path: '/pagesJK/indicator/components/details1',
						query: {
							type: 1,
							city: uni.getStorageSync('cityName'),
							county: params.name,
							mainNavIndex: 1
						}
					});
				});
			},
			async initChart1() {
				let option = {
					grid: {
						top: '20rpx',
						bottom: '65rpx',
						left: '50rpx'
					},
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params[0].name +
								'\n' +
								'专线开通时长： ' +
								params[0].value +
								' 天' +
								'\n' +
								'专线在途工单数： ' +
								params[1].value +
								' 件'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.jikeCityData.map(item => item.County),
						axisLabel: {
							interval: 0,
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: [{
						orient: 'horizontal',
						left: 'center',
						bottom: '0',
						data: ['专线开通时长', '专线在途工单数'],
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 10,
						},
						itemWidth: 10, // 设置图例方块宽度
						itemHeight: 10, // 设置图例方块高度
					}, ],
					yAxis: [{
						// min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							color: '#0CB480', // 设置标签颜色
						},
						type: 'value',
						splitNumber: 4, //分割成几段
					}, {
						splitLine: {
							show: false // 隐藏第二个 Y 轴的刻度线
						},

						axisLabel: {
							color: '#1B9CFF', // 设置标签颜色
						},
						type: 'value',
						name: '',
						splitNumber: 4, //分割成几段
					}],
					series: [{
						data: this.jikeCityData.map(item => item.Zxktsc),
						type: 'bar',
						name: '专线开通时长',
						itemStyle: {
							color: '#0CB480',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5,
					}, {
						data: this.jikeCityData.map(item => item.ZxztNum),
						type: 'bar',
						name: '专线在途工单数',
						yAxisIndex: 1, // 指定使用第二个 Y 轴
						itemStyle: {
							color: '#1B9CFF',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5,
					}]
				};
				const chart1 = await this.$refs.chartRef9.init(echarts)
				chart1.setOption(option);
				this.chartInstance = chart1;
			},
			async initChart4() {
				let option1 = {
					grid: {
						top: '20rpx',
						bottom: '65rpx',
						left: '50rpx'
					},
			 
					legend: [{
						orient: 'horizontal',
						left: 'center',
						bottom: '0',
						data: ['商客宽带退单量'],
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 10,
						},
						itemWidth: 10, // 设置图例方块宽度
						itemHeight: 10, // 设置图例方块高度
					}, ],
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.jikeCityData1.map(item => item.County),
						axisLabel: {
							interval: 0,
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					yAxis: [{
						// min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							color: '#A4A8B7', // 设置标签颜色
						},
						type: 'value',
						splitNumber: 4, //分割成几段
					}],
					series: [{
						data: this.jikeCityData1.map(item => item.QkttNum),
						type: 'bar',
						name: '商客宽带退单量',
						itemStyle: {
							color: '#F37A00',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5,
					}]
				};
				const chart2 = await this.$refs.chartRef10.init(echarts)
				chart2.setOption(option1);
				chart2.on('click', (params) => {
					this.$router.push({
						path: '/pagesJK/indicator/components/details1',
						query: {
							type: 2,
							city: uni.getStorageSync('cityName'),
							county: params.name,
							mainNavIndex: 2
						}
					});
				});
			},
			async initChart5() {
				let option1 = {
					grid: {
						top:  35,
						bottom: '65rpx',
						left: '55rpx'
					},
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
					},
					legend: [{
						orient: 'horizontal',
						left: 'center',
						top: '0',
						data: [this.action == 1 ? '5G流量' : this.action == 2 ? '4G流量' : this.action == 3 ? '家宽流量' : '话务量'],
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 10,
						},
						itemWidth: 10, // 设置图例方块宽度
						itemHeight: 10, // 设置图例方块高度
					}],
					xAxis: {
						type: 'category',
						data: this.businessDataAction.map(item => item.Date),
						axisLabel: {
							rotate: 45,
							fontSize: 10,
							color: '#707070', // 
						},
						axisTick: {
							show: false,
							color: '#707070', // 
						},
						scrollbar: {
							show: true
						},
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#CCCCCC',
							},
						},
					
					},
					
					yAxis: [{
						axisLabel: {
							color: '#A4A8B7', // 设置标签颜色
						},
						type: 'value',
					}],
					series: [{
						data: this.businessDataAction.map(item => item.Value),
						type: 'line',
						name: this.action == 1 ? '5G流量' : this.action == 2 ? '4G流量' : this.action == 3 ? '家宽流量' : '话务量',
						itemStyle: {
							color: '#309BF1',
						}
					}]
				};
				const chart2 = await this.$refs.chartRef11.init(echarts)
				chart2.setOption(option1);
				// chart2.on('click', (params) => {
				// 	this.$router.push({
				// 		path: '/pagesJK/indicator/components/details1',
				// 		query: {
				// 			type: 2,
				// 			city: uni.getStorageSync('cityName'),
				// 			county: params.name,
				// 			mainNavIndex: 2
				// 		}
				// 	});
				// });
			},
			async init2() {
				let option1 = {
					grid: {
						top: '30rpx',
						left: '50rpx',
						right: '20rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.YDYWListName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n')
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: {
						// min: 0, //最小百分比
						// max: 100, //最大百分比
						// interval: 25, // 每 25% 画一条线
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: []
				}
				option1.yAxis = {
					axisLabel: {
						color: '#5C5C5C', // 设置标签颜色
						formatter: function(value) {
							return value
						}
					},
					type: 'value',
					axisLine: {
						show: true, // 显示y轴
						lineStyle: {
							type: 'dotted', // 点线
							color: '#ccc', // 线条颜色
							dashOffset: 0
						}
					},
				}
				option1.legend = [{
						data: ['移动网络表现值'],
						left: '50',
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 8,
							rich: {
								a: {
									verticalAlign: 'middle'
								}
							}
						},
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10
					},
					{
						data: ['移动网络领先值'],
						// top:20,
						right: '50',
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 8,
							rich: {
								a: {
									verticalAlign: 'middle'
								}
							}
						},
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10
					}
				]
				option1.tooltip = {
					trigger: 'item',
					confine: true, // 将tooltip框限制在图表的区域内
					textStyle: {
						color: '#FFFFFF' // 字体颜色改为白色
					},
					backgroundColor: '#656565', // 背景颜色改为黑色
					borderColor: '#656565',
					formatter: params => {
						return (
							params.name +
							'\n' +
							'移动网络表现值： ' +
							this.YDYWList[params.dataIndex] +
							'' +
							'\n' +
							'移动网络领先值： ' +
							this.YDYWList2[params.dataIndex] +
							''
						)
					}
				}
				option1.series = [{
						data: this.YDYWList,
						barCategoryGap: '100',
						type: 'bar',
						name: '移动网络表现值',
						itemStyle: {
							color: '#1B9CFF',
							borderRadius: 4,
							borderColor: '#1B9CFF',
							borderWidth: 0
						},
						markLine: {
							data: [{
								type: 'line',
								name: '目标值(80)',
								yAxis: 80,
								lineStyle: {
									color: '#2654B0',
									type: 'dashed'
								},
								label: {
									show: false // 不显示标签
								}
							}]
						},
						barWidth: 5
					},
					{
						data: this.YDYWList2,
						barCategoryGap: '100',
						name: '移动网络领先值',
						type: 'bar',
						itemStyle: {
							color: '#16CBAC',
							borderRadius: 4,
							borderColor: '#16CBAC',
							borderWidth: 0
						},
						barWidth: 5
					}
				]
				const chart4 = await this.$refs.chartRef5.init(echarts)
				chart4.setOption(option1)
			},
			
			// 渲染柱状图/折线图
			async init() {
				// 5G分流比
				let option = {
					grid: {
						left: '50rpx',
						right: '20rpx',
						button: '0rpx',
						top: '30rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'政企专线： ' +
								this.ZQZXData[params.dataIndex] +
								'条'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.ZQZXDataName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n')
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: {
						min: 1, //最小百分比
						max: 40000, //最大百分比
						// interval: 25, // 每 25% 画一条线
						axisLabel: {
							formatter: function(value) {
								return value > 1 ? ((value / 10000 > 1 ? value / 10000 : 1) + '万条') : 0
							},
							color: '#5C5C5C' // 设置标签颜色
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					},
					series: [{
						data: this.ZQZXData,
						type: 'bar',
						name: '政企专线',
						itemStyle: {
							color: '#0CB480',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}]
				}
				option.legend = [{
					data: ['政企专线'],
					left: '25',
					textStyle: {
						color: '#A7ABBB', // 默认文本颜色
						height: 8,
						rich: {
							a: {
								verticalAlign: 'middle'
							}
						}
					},
					itemWidth: 10, // 设置图例项的宽度
					itemHeight: 10
				}]
				const chart2 = await this.$refs.chartRef3.init(echarts)
				chart2.setOption(option)
			},


			// 跳转
			goQualityAndScale() {
				this.$router.push({
					path: '/pagesJK/scaleAndQuality/index',
					query: {}
				});
			},
			goDetails(type) {
				this.$router.push({
					path: '/pagesJK/indicator/components/details',
					query: {
						type: type,
						cityName: uni.getStorageSync('cityName'),
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 370rpx;
		background-color: #fff;
		background: url(@/static/images/banner_yewu.png) no-repeat center;
		background-size: contain;
		position: relative;

		.title {
			width: 327rpx;
			height: 110rpx;
			background: url(@/static/picture/indicator/title5.png) no-repeat center;
			background-size: contain;
			position: absolute;
			left: 10rpx;
			bottom: 70rpx;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 700;
			padding: 21rpx 0 0 85rpx;
		}
	}

	// 有线装维
	.satisfaction {
		width: 100%;
		padding: 0rpx 20rpx 20rpx 20rpx;
		background-color: #cce7ff;

		.main {
			width: 100%;
			background-color: #ffffff;
			border-radius: 16rpx;
			padding-bottom: 10rpx;
			padding-top: 40rpx;
			.tjzq{
				font-size: 28rpx;
				width: 100%;
				text-align: center;
				color: #5F6475;
				margin: 20rpx 0;
			}
			.count {
				padding-left: 51rpx;
				display: flex;
				align-items: center;
				height: 110rpx;

				:nth-child(1) {
					color: #5F6475;
					margin-right: 20rpx;
					font-size: 28rpx;
					height: 44rpx;
					padding-top: 10rpx;
				}

				:nth-child(2) {
					color: #000;
					font-weight: 700;
					margin-right: 9rpx;
					height: 44rpx;
					font-size: 36rpx;
				}

				:nth-child(3) {
					padding-top: 10rpx;
					line-height: 44rpx;
					color: #000;
					font-size: 24rpx;
				}
			}
		}

		.title {
			margin-top: 16rpx;
			width: 100%;
			height: 110rpx;
			background-color: #CCE7FF;

			.img {
				width: 100%;
				height: 110rpx;
				background: url(@/static/images/pic_title_yewu2.png) no-repeat center;
				background-size: 100%;
			}
			.img2 {
				width: 100%;
				height: 110rpx;
				background: url(@/static/images/dishi/ywgm_bg.png) no-repeat center;
				background-size: 100%;
			}
			.img3 {
				width: 100%;
				height: 110rpx;
				background: url(@/static/images/dishi/wlzl_bg.png) no-repeat center;
				background-size: 100%;
			}
			.img4 {
				width: 100%;
				height: 110rpx;
				background: url(@/static/images/dishi/gdyw_bg.png) no-repeat center;
				background-size: 100%;
			}
		}
		.pic_fenge {
		margin: 27rpx 0 0rpx 0;
		width: 100%;
		height: 50rpx;
		background: url(@/static/images/fengexian2.png) no-repeat center;
		background-size: 100%;
	}
		.ywgmView{
			display: flex;
			align-content: center;
			justify-content: space-between;
			width: 640rpx;
			margin: 0 auto;
			.font1{
				background: url(@/static/images/dishi/action.png) no-repeat;
				background-size: 100% 100%;
				width: 150rpx;
				padding: 20rpx 14rpx;
				text-align: center;
			}
			.font1s{
				background: url(@/static/images/dishi/action2.png) no-repeat;
				background-size: 100% 100%;
				width: 150rpx;
				height: 90rpx;
				padding: 20rpx;
				text-align: center;
			}
		}
		.wired {
			position: relative;
			width: 100%;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: -90rpx;
			padding-bottom: 20rpx;

			.bar-chart {
				margin-top: 60rpx;
				padding: 0 55rpx;

				.chart-main {
					height: 100%;
					background: linear-gradient(180deg, #FFFFFF 0%, #E6F3FF 100%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 1rpx solid #E5F3FF;
					padding-bottom: 28rpx;

					.chart-main-top {
						display: flex;

						.chart-main-top-left {
							margin-top: -20rpx;
							margin-left: 47rpx;
							height: 61rpx;
							background: #FFFFFF;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							color: #000000;
							text-align: center;
						}

						// .chart-main-top-bottom{
						// 	margin-top: 26rpx;
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: center;
						// 	:nth-child(1){

						// 	}
						// 	:nth-child(2){
						// 		min-width: 136rpx;
						// 		height: 66rpx;
						// 		line-height: 66rpx;
						// 		text-align: center;
						// 		background: url(@/static/images/numbg.png) no-repeat center;
						// 		background-size: 136rpx 66rpx;
						// 		// padding: 13rpx 46rpx 16rpx;
						// 		color: #000000;
						// 		font-weight: bold;
						// 		font-size: 28rpx;
						// 	}
						// }
					}

					.broadband {
						margin-top: 24rpx;
						width: 100%;
						height: 66rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.broadband-item {
							width: 33%;
							display: flex;
							justify-content: center;

							.broadband-item-bg {
								min-width: 136rpx;
								padding: 20rpx 34rpx;
								text-align: center;
								background: url(@/static/images/numbg.png) no-repeat center center;
								background-size: 100% 100%;
								color: #000000;
								font-weight: bold;
								font-size: 28rpx;
							}
						}
					}

					.broadband-font {
						margin-top: 11rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						color: #A7ABBB;
						font-size: 24rpx;

						>view {
							width: 33%;
							text-align: center;
						}
					}
				}

			}

			.return-quantity {
				padding: 0 55rpx;
				position: relative;
				margin-top: 40rpx;
				.return-quantity-main {
					width: 100%;
					height: 188rpx;
					border: 1rpx solid #E5F3FF;
					background: linear-gradient(180deg, #FFFFFF 0%, #E6F3FF 100%);
					display: flex;
					align-items: center;

					.return-quantity-main-left {
						width: 39rpx;
						margin: 29rpx 52rpx 24rpx 104rpx;
						height: 135rpx;

						:nth-child(1) {
							width: 39rpx;
							height: 63rpx;
							background-color: #7da4cf;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}

						:nth-child(2) {
							margin: 2rpx 0;
							width: 39rpx;
							height: 39rpx;
							background-color: #2654B0;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}

						:nth-child(3) {
							width: 39rpx;
							height: 18rpx;
							background-color: #5855D6;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}

					}

					.return-quantity-main-center {
						width: 42rpx;
						height: 97rpx;
						background: url(@/static/images/yewu_bg.png) no-repeat center;
						background-size: 100%;
						margin-right: 23rpx;
					}

					.return-quantity-main-bottom {
						color: #A7ABBB;
						font-size: 24rpx;

						:nth-child(2) {
							margin: 12rpx 0;
						}

						i {
							font-style: normal;
							margin-left: 23rpx;
							font-weight: bold;
							font-size: 28rpx;
						}
					}
				}

				.return-quantity-left {
					position: absolute;
					top: -20rpx;
					left: 120rpx;
					background-color: #fff;
				}
			}
		}
		.tjzq{
			font-size: 28rpx;
			width: 100%;
			text-align: center;
			color: #5F6475;
			margin: 20rpx 0;
		}
		.guangdian{
				margin: 20rpx auto;
				.guangdian_title{
					display: flex;
					align-items: center;
					.tipsNr_icon{
						width: 18rpx;
						height: 18rpx;
						margin-right: 15rpx;
					}
					.tipsNr_text{
						width: 120rpx;
						height: 42rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #0B1C03;
					}
				}
				.guangdian_nr{
					width: 596rpx;
					height: 329rpx;
					position: relative;
					margin: 0 auto;
					margin-top: 20rpx;
					.guangdian_icon{
						width: 102rpx;
						height: 102rpx;
						position: absolute;
						top: 113rpx;
						left: 250rpx;
					}
					.guangdian_nrItem{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 18rpx;
						.nrItem_left{
							width: 290rpx;
							height: 160rpx;
							// background: linear-gradient( 180deg, #FFFFFF 0%, #ECF0F8 100%);
							border-radius: 10rpx;
							border: 1rpx solid #ECF0F8;
							.nrItem_left_title{
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #8F8E94;
								line-height: 32rpx;
								text-align: center;
								margin-top: 30rpx;
							}
							.nrItem_left_num{
								font-family: DIN, DIN;
								font-weight: bold;
								font-size: 36rpx;
								color: #007AFF;
								line-height: 36rpx;
								text-align: center;
								margin-top: 6rpx;
							}
						}
						.nrItem_right{
							width: 290rpx;
							height: 160rpx;
							// background: linear-gradient( 180deg, #FFFFFF 0%, #ECF0F8 100%);
							border-radius: 10rpx;
							border: 1px solid #ECF0F8;
							.nrItem_right_title{
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #8F8E94;
								line-height: 32rpx;
								text-align: center;
								margin-top: 30rpx;
							}
							.nrItem_right_num{
								font-family: DIN, DIN;
								font-weight: bold;
								font-size: 36rpx;
								color: #007AFF;
								line-height: 36rpx;
								text-align: center;
								margin-top: 6rpx;
							}
						}
					}
				}
			}
		.jike {
			margin-top: 60rpx;
			padding: 0 55rpx;

			
		}
		.jike-main {
			height: 100%;
			background: linear-gradient(180deg, #FFFFFF 0%, #E6F3FF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #E5F3FF;
			padding-bottom: 28rpx;
		
			.jike-main-top {
				display: flex;
		
				.jike-main-top-left {
					margin-top: -20rpx;
					width: 223rpx;
					height: 61rpx;
					background: #FFFFFF;
					color: #000000;
					text-align: center;
				}
			}
		
			.duration {
				width: 100%;
				display: flex;
				align-items: center;
				text-align: center;
		
				.duration-item {
					margin-top: 24rpx;
					width: 50%;
		
					.font1 {
						margin-bottom: 10rpx;
						display: flex;
						// align-items: center;
						justify-content: center;
						color: #000000;
						font-weight: bold;
						font-size: 30rpx;
		
						.icon {
							width: 40rpx;
							height: 40rpx;
							display: inline-block;
							background: url(@/static/images/icon_yewu1.png) no-repeat center;
							background-size: 40rpx 40rpx;
							margin-right: 8rpx;
						}
		
						.icon2 {
							width: 40rpx;
							height: 40rpx;
							display: inline-block;
							background: url(@/static/images/icon_yewu2.png) no-repeat center;
							background-size: 40rpx 40rpx;
							margin-right: 8rpx;
						}
		
						.icon3 {
							width: 40rpx;
							height: 40rpx;
							display: inline-block;
							background: url(@/static/images/icon_yewu3.png) no-repeat center;
							background-size: 40rpx 40rpx;
							margin-right: 8rpx;
						}
		
						.icon4 {
							width: 40rpx;
							height: 40rpx;
							display: inline-block;
							background: url(@/static/images/icon_yewu4.png)no-repeat center;
							background-size: 40rpx 40rpx;
							margin-right: 8rpx;
						}
					}
		
					.font2 {
						color: #A7ABBB;
						font-size: 24rpx;
					}
				}
			}
		}
		
		.bottom-img {
			width: 100%;
			height: 110rpx;
			margin-top: 20rpx;

			.img {
				width: 100%;
				height: 110rpx;
				background: url(@/static/images/pic_gmyzl.png) no-repeat center;
				background-size: 100%;
			}

		}
	}
	
	.legend {
		display: flex;

		.legend-item {
			display: flex;
			align-items: center;

			.dashed {
				margin-left: 110rpx;
				width: 20rpx;
				height: 2rpx;
				border-top: 4rpx dashed #2654B0;
				margin-right: 10rpx;
			}

			.font {
				color: #A7ABBB;
				font-size: 26rpx;
				margin-right: 10rpx;
			}

			.font1 {
				color: #2654B0;
				font-weight: bold;
				font-size: 28rpx;
			}
		}

	}

	.pic_fenge {
		margin: 27rpx 0 0rpx 0;
		width: 100%;
		height: 50rpx;
		background: url(@/static/images/fengexian2.png) no-repeat center;
		background-size: 100%;
	}

	.u-tabs {
		padding: 0 180rpx;
	}

	/deep/ .u-item-bg,
	.u-subsection {
		border-radius: 30upx !important;
	}

	/deep/ .u-navbar-content-title {
		width: 550rpx !important;
		left: 100rpx !important;
		right: 100rpx !important;
	}

	/deep/ .u-active {

		color: #1b9cff !important;
	}
</style>